<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>门店统计</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/icons-extra.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
        <link href="css/style.css" rel="stylesheet" />
        <link href="css/skin.css" rel="stylesheet" />
	</head>
	<body style="padding-bottom:64px;">
		<section class="top-wrap">
			<header id="header" class="mui-bar mui-bar-nav city-bar">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">数据统计</h1>
			</header>
			<div class="day-data">
				<h1 class="mui-text-center dates" data-options='{"type":"month"}'>2018-11</h1>
				<div class="mui-row">
					<div class="mui-col-sm-12 mui-col-xs-12">
						<p class="mui-text-center sub-t">累计客户数</p>
						<h3 class="mui-text-center totalM">0</h3>
					</div>
				</div>
				<div class="mui-row" style="margin-top:20px;">
					<div class="mui-col-sm-6 mui-col-xs-6 boder-r">
						<p class="mui-text-center sub-t">成交订金数</p>
						<h3 class="mui-text-center sub-num deposit_amount">0</h3>
					</div>
					<div class="mui-col-sm-6 mui-col-xs-6">
						<p class="mui-text-center sub-t">成交合同数</p>
						<h3 class="mui-text-center sub-num dcontract_amount">0</h3>
					</div>
				</div>
			</div>
		</section>
		<section class="stores_wrap">
			<div class="stores_title mui-clearfix">
				<h3 class="mui-pull-left"><span class="mui-icon mui-icon-extra mui-icon-extra-hotel"></span>月统计</h3>
			</div>
			<div class="stores_others">
				 <div class="mui-row">
				 	<div class="mui-col-sm-12 mui-col-xs-12">门店<span class="store_name">22</span></div>
				 	<div class="mui-col-sm-6 mui-col-xs-6">约尺率<span class="store_ycl">22</span></div>
				 	<div class="mui-col-sm-6 mui-col-xs-6">量尺率<span class="store_lcl">22</span></div>
				 	<div class="mui-col-sm-6 mui-col-xs-6">订金金额<span class="store_deposit">22</span></div>
				 	<div class="mui-col-sm-6 mui-col-xs-6">合同金额<span class="store_contract">22</span></div>
				 </div>
			</div>
			<div class="chart-container"></div>
		</section>
		<section class="stores_total">
			<div class="stores_title mui-clearfix">
				<h3 class="mui-pull-left"><span class="mui-icon mui-icon-extra mui-icon-extra-order"></span>总计</h3>
			</div>
			<ul class="mui-table-view mui-grid-view mui-grid-9">
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
	            	<h3 class="orders">0</h3>
	            	<p>总派单数</p>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
	            	<h3 class="msorders">0</h3>
	            	<p>派尺订单</p>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
	            	<h3 class="msordersProbability">0</h3>
	            	<p>约尺率</p>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
	            	<h3 class="measure">0</h3>
	            	<p>量尺订单</p>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
	            	<h3 class="scaleProbability">0</h3>
	            	<p>量尺率</p>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
	            	<h3 class="closingProbability">0</h3>
	            	<p>成交率</p>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
	            	<h3 class="deposit">0</h3>
	            	<p>订金数量</p>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
	            	<h3 class="contract">0</h3>
	            	<p>合同数量</p>
	            </li>
	           
	        </ul>
		</section>
		<nav class="mui-bar mui-bar-tab bottom-bar">
			<a class="mui-tab-item" href="index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="list.html">
				<span class="mui-icon mui-icon-list"></span>
				<span class="mui-tab-label">客户</span>
			</a>
			<a class="mui-tab-item mui-active" href="statistics.html">
				<span class="mui-icon mui-icon-extra mui-icon-extra-rank"></span>
				<span class="mui-tab-label">统计</span>
			</a>
			<a class="mui-tab-item" href="personal.html">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
		<script>
			(function() {
				mui('.bottom-bar').on('tap','a',function(){
				    window.top.location.href=this.href;
				});
				mui.init();
				var btns = mui('.dates')[0];
				btns.addEventListener('tap', function() {
					var _self = this;
					if(_self.picker) {
						_self.picker.show(function (rs) {
							btns.innerText = rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					} else {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						_self.picker = new mui.DtPicker(options);
						_self.picker.show(function(rs) {
							btns.innerText =  rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					}
					
				}, false);
				
				var dcontainer= document.querySelector('.chart-container');
				var canvas = document.createElement('canvas');
				dcontainer.appendChild(canvas);
				var popCanvas = canvas.getContext('2d');
				var config = {
					type: 'doughnut',
					data: {
						datasets: [{
							data: [5,6,7,8,9],
							backgroundColor: ['#ff3d67','#ff9f40','#c0cf18','#4bc0c0','#3dff81','#8c18cf'],
							label: 'Dataset 1'
						}],
						labels: ['总派单数','派尺订单','量尺订单','订金单数','合同单数']
					},
					options: {
						responsive: true,
						legend: {
							display: true,
							position: 'right',
						},
						animation: {
							animateScale: true,
							animateRotate: true
						}
					}
				};
				new Chart(popCanvas, config);
			})(mui);
		</script>
	</body>
</html>
